<html>
<head>
<title>day07-作业-开屏广告.ets</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.s0 { color: #52cb54;}
.s1 { color: #a9b7c6;}
.s2 { color: #bbb529;}
.s3 { color: #faa23d;}
.s4 { color: #e2da90;}
.s5 { color: #b3e54c;}
.s6 { color: #db7e9b;}
.s7 { color: #aa7dfc;}
</style>
</head>
<body bgcolor="#2b2b2b">
<table CELLSPACING=0 CELLPADDING=5 COLS=1 WIDTH="100%" BGCOLOR="#606060" >
<tr><td><center>
<font face="Arial, Helvetica" color="#000000">
day07-作业-开屏广告.ets</font>
</center></td></tr></table>
<pre><span class="s0">//1、定义状态变量定时器用来存储数据，开启倒计时，加载完毕.onAPPear</span>
<span class="s0">//2、多次执行，每隔1秒，见减一个数</span>
<span class="s0">//3、判断渲染，倒计时结束时，隐藏广告，</span>
<span class="s0">//4、定义isShow显示是否显示或关闭广告</span>
<span class="s2">@</span><span class="s1">Entry</span>
<span class="s2">@</span><span class="s1">Component</span>
<span class="s1">struct OpenAD </span><span class="s3">{</span>
  <span class="s0">//存储数据</span>
  <span class="s2">@</span><span class="s1">State second</span><span class="s4">: </span><span class="s1">number </span><span class="s4">= -</span><span class="s5">1</span>
  <span class="s0">//倒计时结束和点击跳过隐藏广告</span>
  <span class="s2">@</span><span class="s1">State isShow</span><span class="s4">: </span><span class="s1">boolean </span><span class="s4">= </span><span class="s1">true</span>
  <span class="s2">@</span><span class="s1">State Isopacity</span><span class="s4">: </span><span class="s1">number </span><span class="s4">= </span><span class="s5">1</span>

  <span class="s1">build</span><span class="s6">() </span><span class="s3">{</span>
    <span class="s1">Stack</span><span class="s6">() </span><span class="s3">{</span>
      <span class="s1">Column</span><span class="s6">() </span><span class="s3">{</span>
        <span class="s1">Image</span><span class="s6">(</span><span class="s1">$r</span><span class="s6">(</span><span class="s7">'app.media.open_content'</span><span class="s6">))</span>
          <span class="s4">.</span><span class="s1">width</span><span class="s6">(</span><span class="s7">'100%'</span><span class="s6">)</span>
      <span class="s3">}</span>
      <span class="s4">.</span><span class="s1">fullSize</span><span class="s6">()</span>

      <span class="s1">if </span><span class="s6">(</span><span class="s1">this</span><span class="s4">.</span><span class="s1">isShow</span><span class="s6">) </span><span class="s3">{</span>
        <span class="s1">Stack</span><span class="s6">(</span><span class="s3">{ </span><span class="s1">alignContent</span><span class="s4">: </span><span class="s1">Alignment</span><span class="s4">.</span><span class="s1">Top </span><span class="s3">}</span><span class="s6">) </span><span class="s3">{</span>
          <span class="s1">Image</span><span class="s6">(</span><span class="s1">$r</span><span class="s6">(</span><span class="s7">'app.media.open_ad'</span><span class="s6">))</span>
            <span class="s4">.</span><span class="s1">width</span><span class="s6">(</span><span class="s7">'100%'</span><span class="s6">)</span>
          <span class="s1">Text</span><span class="s6">(</span><span class="s7">`跳过</span><span class="s3">${</span><span class="s1">this</span><span class="s4">.</span><span class="s1">second</span><span class="s3">}</span><span class="s7">`</span><span class="s6">)</span>
            <span class="s4">.</span><span class="s1">textExtend</span><span class="s6">()</span>
            <span class="s4">.</span><span class="s1">position</span><span class="s6">(</span><span class="s3">{ </span><span class="s1">x</span><span class="s4">: </span><span class="s7">'100%'</span><span class="s4">, </span><span class="s1">y</span><span class="s4">: </span><span class="s5">40 </span><span class="s3">}</span><span class="s6">)</span>
            <span class="s4">.</span><span class="s1">translate</span><span class="s6">(</span><span class="s3">{ </span><span class="s1">x</span><span class="s4">: -</span><span class="s5">80 </span><span class="s3">}</span><span class="s6">)</span>
            <span class="s4">.</span><span class="s1">onClick</span><span class="s6">(() </span><span class="s4">=&gt; </span><span class="s3">{</span>
              <span class="s1">this</span><span class="s4">.</span><span class="s1">isShow </span><span class="s4">= </span><span class="s1">false</span>
            <span class="s3">}</span><span class="s6">)</span>
        <span class="s3">}</span>
        <span class="s4">.</span><span class="s1">visibility</span><span class="s6">(</span><span class="s1">this</span><span class="s4">.</span><span class="s1">second </span><span class="s4">== </span><span class="s5">0 </span><span class="s4">? </span><span class="s1">Visibility</span><span class="s4">.</span><span class="s1">None </span><span class="s4">: </span><span class="s1">Visibility</span><span class="s4">.</span><span class="s1">Visible</span><span class="s6">)</span>
        <span class="s0">// .opacity(this.Isopacity)</span>
        <span class="s4">.</span><span class="s1">onAppear</span><span class="s6">(() </span><span class="s4">=&gt; </span><span class="s3">{</span>
          <span class="s1">let timeId </span><span class="s4">= </span><span class="s1">setInterval</span><span class="s6">(() </span><span class="s4">=&gt; </span><span class="s3">{</span>
            <span class="s1">this</span><span class="s4">.</span><span class="s1">second</span><span class="s4">--</span>
            <span class="s1">if </span><span class="s6">(</span><span class="s1">this</span><span class="s4">.</span><span class="s1">second </span><span class="s4">== </span><span class="s5">0</span><span class="s6">) </span><span class="s3">{</span>
              <span class="s1">clearInterval</span><span class="s6">(</span><span class="s1">timeId</span><span class="s6">)</span>
              <span class="s0">// this.Isopacity = 0</span>
            <span class="s3">}</span>
          <span class="s3">}</span><span class="s4">, </span><span class="s5">1000</span><span class="s6">)</span>
          <span class="s1">this</span><span class="s4">.</span><span class="s1">second </span><span class="s4">= </span><span class="s5">5</span>
        <span class="s3">}</span><span class="s6">)</span>
        <span class="s4">.</span><span class="s1">fullSize</span><span class="s6">()</span>
        <span class="s4">.</span><span class="s1">backgroundColor</span><span class="s6">(</span><span class="s7">'#fefefe'</span><span class="s6">)</span>
      <span class="s3">}</span>

    <span class="s3">}</span>

  <span class="s3">}</span>

  <span class="s2">@</span><span class="s1">Styles</span>
  <span class="s1">fullSize</span><span class="s6">()</span><span class="s3">{</span>
    <span class="s4">.</span><span class="s1">width</span><span class="s6">(</span><span class="s7">'100%'</span><span class="s6">)</span>
    <span class="s4">.</span><span class="s1">height</span><span class="s6">(</span><span class="s7">'100%'</span><span class="s6">)</span>
  <span class="s3">}</span>
<span class="s3">}</span>

<span class="s2">@</span><span class="s1">Extend</span><span class="s6">(</span><span class="s1">Text</span><span class="s6">)</span>
<span class="s1">function textExtend</span><span class="s6">() </span><span class="s3">{</span>
  <span class="s4">.</span><span class="s1">backgroundColor</span><span class="s6">(</span><span class="s1">Color</span><span class="s4">.</span><span class="s1">Gray</span><span class="s6">)</span>
  <span class="s4">.</span><span class="s1">fontSize</span><span class="s6">(</span><span class="s5">10</span><span class="s6">)</span>
  <span class="s4">.</span><span class="s1">padding</span><span class="s6">(</span><span class="s3">{</span>
    <span class="s1">top</span><span class="s4">: </span><span class="s5">8</span><span class="s4">,</span>
    <span class="s1">bottom</span><span class="s4">: </span><span class="s5">8</span><span class="s4">,</span>
    <span class="s1">left</span><span class="s4">: </span><span class="s5">20</span><span class="s4">,</span>
    <span class="s1">right</span><span class="s4">: </span><span class="s5">20</span>
  <span class="s3">}</span><span class="s6">)</span>
  <span class="s4">.</span><span class="s1">fontColor</span><span class="s6">(</span><span class="s1">Color</span><span class="s4">.</span><span class="s1">White</span><span class="s6">)</span>
  <span class="s4">.</span><span class="s1">borderRadius</span><span class="s6">(</span><span class="s5">15</span><span class="s6">)</span>
<span class="s3">}</span>
</pre>
</body>
</html>